<!--
	这个是老师本次教学的最后一个知识点啦，详细页展示某个景点的票，他是一种递归数据。
		之前我们没有太了解组件name属性，他一个和重要的作用就是递归调用，另外使用vue-devtools时候也可以看到这个
-->
<template>
	<div class="detail-list">
		<div
	    	class="item"
	      	v-for="(item, index) of list"
	      	v-bind:key="index">
	      	<div class="item-title border-bottom">
	        	<span class="item-title-icon"></span>
	        	{{item.title}}
	      	</div>
      		<div 
                v-if="item.children" 
                class="item-chilren">
        		<detail-list 
                    v-bind:list="item.children"></detail-list>
      		</div>
    	</div>
	</div>
</template>

<script type="text/javascript">
    export default{
    	name:"DetailList",
    	props:['list'],
    	data(){
    		return {
    			msg:"detail list"
    		}
    	}
    }
</script>

<style lang="stylus" scoped>
  .item-title-icon
    position: relative
    left: .06rem
    top: .06rem
    display: inline-block
    width: .36rem
    height: .36rem
    background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat
    margin-right: .1rem
    background-size: .4rem 3rem
  .item-title
    line-height: .8rem
    font-size: .32rem
    padding: 0 .2rem
  .item-chilren
    padding: 0 .2rem
</style>